<template>
	<div class="shelf-search-wrapper" :class="{'search-top': ifInputClicked, 'hide-shadow': ifHideShadow}">
		<div class="shelf-search" :class="{'search-top': ifInputClicked}">
			<div class="search-wrapper">
				<div class="icon-search-wrapper">
					<span class="icon-search icon"></span>
				</div>
				<div class="search-input-wrapper">
					<input 	class="search-input" 
								 	type="text"
									:placeholder="$t('shelf.search')"
									@click="onSearchClick"
									v-model="searchText">
				</div>
				<!-- 清除按钮 -->
				<div class="icon-clear-wrapper" v-show="searchText.length > 0" @click="clearSearchText">
					<span class="icon-close-circle-fill"></span>
				</div>
			</div>
			<div class="icon-local-wrapper" v-if="!ifInputClicked" @click="switchLocale">
				<span class="icon-cn icon" v-if="lang === 'cn'"></span>
				<span class="icon-en icon" v-else></span>
			</div>
			<div class="cancel-btn-wrapper" @click="onCancleClick" v-else>
				<span class="cancel-text">{{$t('shelf.cancel')}}</span>
			</div>
		</div>
		<transition name="hot-search-move">
			<div class="shelf-search-tab-wrapper" v-if="ifInputClicked">
				<div class="shelf-search-tab-item" v-for="item in tabs" :key="item.id" @click="onTabClick(item.id)">
					<div class="shelf-search-tab-text" :class="{'is-selected': item.id === selectedTab}">{{item.text}}</div>
				</div>
			</div>
		</transition>
	</div>
</template>

<script>
import { setLocalStorage } from '../../utils/localStorage'
import { storeShelfMixin } from '../../utils/mixin'

export default {
	mixins: [storeShelfMixin],
	watch: {
		offsetY(offsetY) {
			if (offsetY > 0 && this.ifInputClicked) {
				this.ifHideShadow = false
			} else {
				this.ifHideShadow = true
			}
		}
	},
	data() {
		return {
			ifInputClicked: false, // 是否点击搜索框
			searchText: '',
			selectedTab: 1,
			ifHideShadow: true // 是否隐藏阴影
		}
	},
	computed: {
		lang() {
			return this.$i18n.locale
		},
		tabs() {
			return [
				{
					id: 1,
					text: this.$t('shelf.default')
				},
				{
					id: 2,
					text: this.$t('shelf.progress')
				},
				{
					id: 3,
					text: this.$t('shelf.purchase')
				}
			]
		}
	},
	methods: {
		switchLocale() { // 点击切换语言
			if (this.lang === 'en') {
				this.$i18n.locale = 'cn'
			} else {
				this.$i18n.locale = 'en'
			}
			// 将设置存入localStorage中
			setLocalStorage('locale', this.$i18n.locale)
		},
		onSearchClick() { // 点击搜索框
			this.ifInputClicked = true
			// 隐藏标题栏
			this.setShelfTitleVisible(false)
		},
		onCancleClick() { // 点击取消
			this.ifInputClicked = false
			// 显示标题栏
			this.setShelfTitleVisible(true)
		},
		clearSearchText() { // 点击清除
			this.searchText = ''
		},
		onTabClick(id) {
			this.selectedTab = id
		}
	}
}
</script>

<style lang="scss" rel="stylesheet/scss" scoped>
	@import "../../assets/styles/global.scss";
	
	.shelf-search-wrapper {
		position: relative;
		z-index: 105;
		width: 100%;
		height: px2rem(94);
		font-size: px2rem(16);
		background: white;
		box-shadow: 0 px2rem(2) px2rem(2) 0 rgba(0, 0, 0, 0.1);
		&.hide-shadow {
			box-shadow: none;
		}
		&.search-top {
			position: fixed;
			top: 0;
			left: 0;
		}
		.shelf-search {
			position: absolute;
			top: px2rem(42);
			left: 0;
			z-index: 105;
			display: flex;
			width: 100%;
			height: px2rem(52);
			transition: top $animationTime linear;
			&.search-top {
				top: 0;
			}
			.search-wrapper {
				flex: 1;
				display: flex;
				margin: px2rem(8) 0 px2rem(8) px2rem(10);
				border: px2rem(1) solid #ccc;
				border-radius: px2rem(3);
				.icon-search-wrapper {
					flex: 0 0 px2rem(22);
					@include right;
					.icon-search {
						font-size: px2rem(12);
					}
				}
				.search-input-wrapper {
					flex: 1;
					padding: 0 px2rem(10);
					box-sizing: border-box;
					@include center;
					.search-input {
						width: 100%;
						font-size: px2rem(14);
						border: none;
						color: #333;
						&:focus {
							outline: none;
						}
						&::-webkit-input-placeholder {
							font-size: px2rem(14);
							color: #ccc;
						}
					}
				}
				.icon-clear-wrapper {
					flex: 0 0 px2rem(24);
					@include left;
					.icon-close-circle-fill {
						font-size: px2rem(14);
						color: #ccc;
					}
				}
			}
			.icon-local-wrapper {
				flex: 0 0 px2rem(55);
				@include center;
				.icon-cn, .icon-en {
					font-size: px2rem(22);
					color: #666;
				}
			}
			.cancel-btn-wrapper {
				flex: 0 0 px2rem(55);
				@include center;
				.cancel-text {
					font-size: px2rem(14);
					color: $color-blue;
				}
			}
		}
		.shelf-search-tab-wrapper {
			position: absolute;
			top: px2rem(52);
			left: 0;
			z-index: 105;
			display: flex;
			width: 100%;
			height: px2rem(42);
			.shelf-search-tab-item {
				flex: 1;
				@include center;
				.shelf-search-tab-text {
					font-size: px2rem(12);
					color: #999;
					&.is-selected {
						color: $color-blue;
					}
				}
			}
		}
	}
</style>
